<template>
  <div>
    <!-- 头部模块开始 -->
    <el-card>
      <div class="clearfix">
        <el-button type="primary" @click="add">添加房产</el-button>

        <span style="float: right; padding: 3px 0">
          <el-autocomplete
            v-model="input3"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
            @input="loadAlls"
          />

          <el-button slot="append" icon="el-icon-search" size="small" @click="search(input3)" />

        </span>

        <span style="float: right; padding: 3px 0">
          <el-dropdown split-button size="small">
            全部经纪
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in AgentsList" :key="item.index" @click.native="xuanze(item.id,'经纪')">{{ item.name }}</el-dropdown-item>

            </el-dropdown-menu></el-dropdown>
        </span>

        <span style="float: right; padding: 3px 0">
          <el-dropdown split-button size="small">
            全部分类
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in classify" :key="item.index" @click.native="xuanze(item.id,'分类')">{{ item.title }}</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </span>

      </div>
    </el-card>
    <!-- 头部模块结束 -->

    <!-- 内容模块开始 -->
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%"
      >

        <el-table-column
          prop="image"
          label="封面"
        >
          <template v-slot="{row}">
            <img v-if="row.image !==''" :src="row.image" alt="" style="width=100px;height:100px;">
            <span v-if="row.image ===''">暂无封面</span>
          </template>

        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="tags"
          label="标签"
        >
          <template v-slot="{row}">

            <span v-if="row.tags!==null">
              <el-tag v-for="item in row.tags" :key="item.index" size="mini" closable>{{ item }}</el-tag>
            </span>
            <span v-else>暂无标签</span>

          </template>
        </el-table-column>

        <el-table-column
          prop="date"
          label="地址"
        >
          <template v-slot="{row}">
            {{ row.address }}
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="分类"
        >
          <template v-slot="{row}">
            {{ row.id | type }}
          </template>
        </el-table-column>

        <el-table-column
          prop="date"
          label="经纪"
        >
          <template v-slot="{row}">
            {{ row.title }}
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          label="价格"
        />

        <el-table-column
          prop="category"
          label="介绍"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            {{ row.desc }}
          </template>
        </el-table-column>

        <el-table-column
          prop="photos"
          label="图片"
        >
          <template v-slot="{row}">

            <span v-if="row.image!=='' ">
              <el-image v-for="item in row.photos" :key="item.index" :src="item" style="width=50px;height:50px;" />
            </span>
            <span v-else>暂无标签</span>

          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
        >
          <template v-slot="{row}">

            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="10">
                <el-button size="mini" type="primary" @click="edit(row.id)">编辑</el-button>
              </el-col>
              <el-col :span="10">
                <el-button size="mini" type="danger" @click="del(row.id)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 内容模块结束 -->

    <!-- 底部分页模块开始 -->
    <el-card>
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="10"

          layout="prev, pager, next"
          :total="tableData? tableData.length:1"
        />
      </el-row>
    </el-card>
    <!-- 底部分页模块结束 -->

    <!-- 弹出组件 -->
    <propertyEdit
      ref="TC"
      :dialog-form-visible="show"

      :is-show="handle"
      :eidt-id="id"
      :edit-info="info"
      @close="show=false"
      @render="renders"
    />

  </div>
</template>

<script>
import propertyEdit from '@/views/property/componments/property-edit.vue' // 新增编辑弹窗组件

import { getPropertyList, getAgents, getCategories, delOne } from '@/api/property' // 获取房产  经纪人  分类列表 删除房产

export default {

  components: {
    propertyEdit // 注册组件

  },

  data() {
    return {
      handle: false, // 控制弹窗组件里的内容模块是否显示
      show: false, // 弹窗组件开关参数
      time: null, // 防抖定时器变量
      input3: '', // 搜索输入关键词
      tableData: [], // 表格渲染存放数据[{}]
      AgentsList: [], // 全部经纪 下拉选项
      classify: [], // 全部分类 下拉选项
      filList: [], // 备份数据 筛选用,
      id: 0, // 当前需要操作的id
      newlist: [], // 搜索组件数据
      info: {} // 回填数据

    }
  },
  created() {
    this.renders() // 页面被创建渲染一次
  },
  mounted() {
    this.restaurants = this.loadAll() // 组件需要的挂载数据
  },
  methods: {
    xuanze(id, wicth) { // 下拉选中某一个时触发的筛选方法
      // 渲染一次tableData
      if (wicth === '分类') {
        this.tableData = this.filSome(id, this.classify) // 筛选对应的数据给到 组件渲染
      // console.log(this.tableData, '选择后')
      }
    },
    filSome(id, data) { // 两个下拉框 点击之后的筛选方法
      const res = this.filList.filter(item => { // 封装筛选方法
        return item.id === id
      })

      console.log(res, '拿到什么')
      return res
    },
    async   rander() { // 调用一次获取一次最新数据     //页面被创建或者刷新时需要执行一次的操作
      const { data } = await getPropertyList() // 房产列表
      const { data: list } = await getAgents() // 经纪人列表
      const { data: res } = await getCategories() // 分类列表

      this.filList = data
      this.AgentsList = list // 同步到全部经纪 下拉选择
      this.classify = res// 同步到全部分类 下拉选择
      this.$store.dispatch('property/saveClassify', this.classify) // 存放到vue-x 给V自定义过滤使用
      console.log(data, '房产列表')
      console.log(list, '经纪人')
      console.log(res, '分类')

      this.filList.forEach(item => { // 筛选出搜索功能需要的数据
        const res = this.fil(item)
        console.log(res)
      })
      console.log(this.newlist, '遍历数据')
    },
    fil(obj) { // 筛选方法搜索框需要的数据
      const newlist = []
      let newobj = { ...obj }
      for (const key in obj) {
        if (key === 'tags' && obj[key] instanceof Array) {
          obj[key].forEach(item => {
            newobj.value = item
            console.log(newobj.value, '每一项标签')
            this.newlist.push(newobj)
            newobj = { ...obj }
          }
          )
        }
        if (key === 'title') {
          newobj.value = obj[key]
          this.newlist.push(newobj)
          newobj = { ...obj }
        }
      }
      return newlist
    },

    // 删除
    async del(id) {
      this.dialogVisible = true // 打开弹窗

      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delOne(id) // 确认删除
        this.renders() // 重新渲染
        this.$message({
          type: 'success', // 提示
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    add() { // 新增用户弹窗开启
      this.show = true
      this.handle = false
    },
    edit(id) { // 编辑
      this.id = id // 传id给组件
      this.show = true // 修改标题
      this.handle = true // 打开弹窗
      const res = this.filList.find(item => {
        return item.id === id // 找出需要编辑的对象回填信息
      })
      console.log(res, '编辑对象')
      const { title, desc, image, agent, address, price, photos, tags, category } = res
      this.info = {
        title: title || '',
        desc: desc || '',
        image: image || '',
        agent: agent || '',
        address: address || '',
        price: price || '',
        photos: photos || [],
        tags: tags || [],
        category: category || '' }
      this.$refs.TC.form = this.info
    },
    async renders() { // 渲染
      await this.rander() // 渲染一次

      this.tableData = this.filList // 渲染最完整的数据
    },
    loadAll() { // 模糊搜索匹配数据存放
      return this.newlist
    },
    querySearch(queryString, cb) { // 搜索组件绑定方法
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) { // 组件匹配绑定方法筛选方法修改处
      return (restaurant) => {
        return (restaurant.value.toLowerCase().match(queryString.toLowerCase())) // 把原生的index方法替换成match方法可以实现模糊搜索
      }
    },
    handleSelect(item) {
      this.tableData = [item] // 选中的那一个数据渲染到页面

      console.log(item) // 选中的那一个
    },
    loadAlls() { // 用户清空搜索框时重新渲染出全部数据
      if (this.input3 === '') {
        this.tableData = this.filList // 渲染最完整的数据
      }
    }

  }

}
</script>
<style lang="scss" scoped>
   i {
    margin-right:20px ;
   }
  ::v-deep .el-input__inner{
    height: 32px;
   }
</style>
